<script setup lang="ts">
  import { useDrop, XYCoord } from "vue3-dnd"
  import DragItem from "@/views/vue-dnd2/dragItem.vue"
  import { ref } from "vue"

  interface DropListItem {
    name: string
    id: string
    dropId: string
    style: {
      position: string
      left: number
      top: number
    }
  }
  const props = defineProps<{
    dropList: DropListItem[]
  }>()

  let boxWidth
  let boxHeight
  const [dropBoxCollect, drop] = useDrop(() => ({
    accept: "box",
    drop(item, monitor) {
      const delta = monitor.getDifferenceFromInitialOffset() as XYCoord
      const delta2 = monitor.getClientOffset() as XYCoord
      console.log("drop", item, delta)
      console.log(delta, delta2)
      boxWidth = document.getElementById("Dro")!.offsetWidth
      boxHeight = document.getElementById("Dro")!.offsetHeight
      // dropbox里面动
      if (item?.style) {
        moveBox(item as DropListItem, delta, boxWidth, boxHeight)
      }
      // 从左侧拖进来的
      if (!item?.style) {
        addDropBox(item as DropListItem, delta2, boxWidth, boxHeight)
      }

      // return的数据会挂在到drag的monitor.getDropResult上面
      return undefined
    },
  }))

  const moveBox = (item: DropListItem, delta: XYCoord, boxWidth: number, boxHeight: number) => {
    // 将item的百分比转成px + 插件移动的距离delta.x
    const left = boxWidth * item.style.left / 100 + delta.x
    const top = boxHeight * item.style.top / 100 + delta.y

    // 再将PX转成百分比
    const leftPercent = left/boxWidth * 100
    const topPercnet = top/boxHeight * 100

    props.dropList.forEach(i => {
      if (i.id === item.id) {
        i.style.left = leftPercent
        i.style.top = topPercnet
      }
    })
    console.log("moveBox", props.dropList)
  }

  const addDropBox = (item: DropListItem, delta: XYCoord, boxWidth: number, boxHeight: number) => {
    console.log("addDropBox", item)
    // 将item的百分比转成px + 插件移动的距离delta.x
    const left = delta.x - 277
    const top = delta.y - 35

    // 再将PX转成百分比
    const leftPercent = left/boxWidth * 100
    const topPercnet = top/boxHeight * 100

    emit("addBox", item, leftPercent, topPercnet)

    console.log("addDropBox", props.dropList)
  }

  // 获取关闭的信息
  const getClose = (res: DropListItem) => {
    console.log("关闭", res)
    emit("removeRepeatBox", res.id)
  }

  const emit = defineEmits<{
    (e: 'addBox', item: DropListItem, leftPercent: number, topPercnet: number): void
    (e: 'removeRepeatBox', id: string): void
  }>()
</script>

<template>
  <div id="Dro" class="drop-box" :ref="drop">
    <DragItem
      v-for="(item) in props.dropList"
      :key="item.id"
      :drag-item="item"
      @closeBox="getClose"
    />
  </div>
</template>

<style scoped>
  .drop-box {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px dashed gray;
    background-color: #e1d4cb;
  }
  .drag-item {
    position: absolute;
    width: 100px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4584f3;
    cursor: move;
  }
</style>